<%--
  创建信息由 IntelliJ IDEA 自动生成。
  用户: 李嘉鸿
  日期: 2024/4/14
  时间: 19:05
  若要更改此模板，请转到 File | Settings | File Templates。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="org.example.DBUtil" %>
<%@ page import="org.example.chatmessages" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif; /* 设置字体为Arial, sans-serif */
        margin: 0; /* 去除外边距 */
        padding: 0; /* 去除内边距 */
        background-color: #f4f4f4; /* 设置背景颜色为浅灰色 */
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 水平居中显示内容 */
    }

    .container {
        display: flex; /* 使用flex布局 */
        width: 70%; /* 宽度占页面的70% */
        height: 80%; /* 高度占页面的80% */
        margin-top: 5%; /* 上边距为5% */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        border-radius: 8px; /* 边角圆滑处理 */
        overflow: hidden; /* 隐藏超出部分 */
        background: white; /* 背景颜色为白色 */
    }

    .chat-container {
        flex-grow: 1; /* 允许聊天容器增长填满剩余空间 */
    }

    .chat-header, .message-input {
        text-align: center; /* 文本居中显示 */
    }

    .chat-messages {
        padding-left: 5%; /* 左内边距5% */
        padding-right: 5%; /* 右内边距5% */
    }

    .user-list {
        width: 200px; /* 用户列表宽度为200px */
        background: #ddf; /* 背景色为浅蓝色 */
    }

    .user-list-header {
        padding: 10px; /* 内边距为10px */
        background-color: #007bff; /* 背景颜色为深蓝色 */
        color: white; /* 文本颜色为白色 */
        text-align: center; /* 文本居中显示 */
    }

    .users {
        padding: 10px; /* 内边距为10px */
    }

    .user {
        padding: 5px; /* 用户名单独内边距为5px */
        border-bottom: 1px solid #ccc; /* 下边框为灰色 */
    }

    .user-count {
        padding: 10px; /* 内边距为10px */
        text-align: center; /* 文本居中显示 */
        background-color: #bbb; /* 背景颜色为浅灰色 */
    }
    .chat-messages{
        height: 70%; /* 聊天信息区域高度为70% */
    }

    .my-message, .my-username {
        text-align: right; /* 文本右对齐 */
        float: right; /* 右浮动 */
        clear: both; /* 清除浮动 */
        padding-top: 2px;
    }

    .other-message, .other-username {
        text-align: left; /* 文本左对齐 */
        float: left; /* 左浮动 */
        clear: both; /* 清除浮动 */
        padding-top: 2px;
    }

    .username{
        display: inline-block; /* 显示为行内块 */
        margin: 0 5px; /* 两侧外边距为5px */
    }

    .message-text {
        display: inline-block; /* 显示为行内块 */
        margin: 0 5px; /* 两侧外边距为5px */
        background-color: #e0f7fa; /* 背景颜色为浅蓝色 */
        font-size: 14px; /* 字体大小为14px */
        padding: 2px 6px;
        border: 2px solid black;
        border-radius: 10px; /* 设置圆角边框 */
    }

    .message {
        width: 100%; /* 宽度占满容器 */
        overflow: hidden; /* 隐藏超出部分 */
        font-size: 16px; /* 字体大小为16px */
    }

</style>
<script>
    var ws;
    function connect() {
        ws = new WebSocket("ws://" + window.location.host + "/websocket");

        ws.onmessage = function(event) {
            var message = JSON.parse(event.data);
            displayMessage(message);
        };

        ws.onclose = function(event) {
            console.log('WebSocket closed!');
        };

        ws.onerror = function(error) {
            console.log('WebSocket Error: ' + error);
        };
    }

    function sendMessage() {
        var messageInput = document.getElementById("message-input");
        var message = messageInput.value;
        ws.send(JSON.stringify({username: '<%= session.getAttribute("username") %>', message: message}));
        messageInput.value = ''; // 清空输入框
    }

    function displayMessage(message) {
        var messagesContainer = document.getElementById("chat-messages");
        var msgDiv = document.createElement("div");
        var userClass = message.username === '<%= session.getAttribute("username") %>' ? "my" : "other";
        msgDiv.className = userClass + "-message";
        msgDiv.innerHTML = "<span class='username " + userClass + "-username'>" +
            (message.username === '<%= session.getAttribute("username") %>' ? '我' : message.username) +
            "</span><span class='message-text " + userClass + "-message-text'>" +
            message.message + "</span>";
        messagesContainer.appendChild(msgDiv);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
    window.onload = connect;
</script>

<body>
<div class="container">
    <div class="chat-container">
        <div class="chat-header">
            <h1>简易聊天室</h1> <!-- 聊天室标题 -->
        </div>
        <div class="chat-messages" id="chat-messages">
            <%-- 迭代显示从数据库获取的聊天信息 --%>
            <%@ page import="java.util.List" %>
            <% DBUtil connector = new DBUtil();
                List<chatmessages> messagesList = connector.getUsers();
                String currentUser = (String) session.getAttribute("username"); // 获取当前用户的用户名
                for (chatmessages message : messagesList) {
                    boolean isCurrentUser = message.getUsername().equals(currentUser); // 判断是否是当前用户
                    String userClass = isCurrentUser ? "my" : "other"; // 设置CSS类
                    String displayName = isCurrentUser ? "我" : message.getUsername(); // 如果是当前用户则显示“我”，否则显示用户名
            %>
            <div class="message <%= userClass %>-message">
                <span class="username <%= userClass %>-username"><%= displayName %></span>
                <span class="message-text <%= userClass %>-message-text"><%= message.getMessageText() %></span>
            </div>
            <% } %>
        </div>
        <div class="message-input">
            <form action="javascript:void(0);" onsubmit="sendMessage(); return false;">
                <input type="text" placeholder="输入消息..." id="message-input" name="message"> <!-- 消息输入框 -->
                <button type="submit">发送</button> <!-- 发送按钮 -->
            </form>
        </div>
    </div>
    <div class="user-list">
        <div class="user-list-header">
            <h2>在线用户</h2> <!-- 在线用户列表标题 -->
        </div>
        <div class="users">
            <div class="user">张三</div>
            <div class="user">李四</div>
            <!-- 更多在线用户 -->
        </div>
        <div class="user-count">当前在线：2人</div> <!-- 显示当前在线用户数量 -->
    </div>
</div>
</body>
</html>
